<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>
                    <el-link type="info" @click="returnList">返回 | 班级详情</el-link>
                </span>
            </div>
            <div class="text item">
                <span style="font-size: 18px;font-weight: bold;"> {{ class_name }}</span>
                <el-button type="primary" style="float: right; padding: 3px 0;width: 80px;" @click="edit">
                    编辑
                </el-button>
            </div>
            <div class="text item">
                <span style="margin-left: 15px;"> 学员数: {{ student_num }}</span>
                <span style="margin-left: 115px;">
                    班级老师:
                    <span v-for="(item, index) in teacher_names"> {{ item }}</span>
                    <span> 等 {{ teacher_names.length }} 位老师</span>
                </span>
            </div>
            <div class="text item"
                v-if="isShow(['kanke:education:gradeclass:student-list', 'kanke:education:gradeclass:teacher-list'])">
                <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
                    <el-tab-pane label="学员" name="first"
                        v-if="hasPermission('kanke:education:gradeclass:student-list')">
                        <StudentList v-if="is_show_student" ref='student' :class_id="class_id" @handleReload="init()">
                        </StudentList>
                    </el-tab-pane>
                    <el-tab-pane label="老师" name="second"
                        v-if="hasPermission('kanke:education:gradeclass:teacher-list')">
                        <TeacherList v-if="!is_show_student" ref="teacher" :class_id="class_id" @handleReload="init()"
                            :teacher_names="teacher_names" :key="teacher_key"></TeacherList>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </el-card>
        <AddClass v-if="showAddClass" :visible.sync="showAddClass" @handleReload="editDetailTeacherLoad()"
            :id="classId" />
    </div>

</template>

<script>
import { hasPermission, isShow } from '@/common/permission';
import { getClassInfo } from "@/api/kanke/gradeclass/gradeclass";
import AddClass from './components/AddClass.vue';
import TeacherList from './components/TeacherList.vue';
import StudentList from './components/StudentList.vue';
export default {
    name: 'DetailClass',
    components: {
        TeacherList,
        StudentList,
        AddClass
    },
    data() {
        return {
            loading: false,
            activeName: 'first',
            class_id: '',
            student_num: 0,
            class_name: '',
            teacher_names: [],
            showAddClass: false,
            classId: 0,   // 员工id
            is_show_student: true,
            teacher_key: 0
        }
    },
    created() {
        this.init();
    },
    watch: {
        '$route'(to, from) {
            if (this.$route.query.id) {
                this.init();
            }
        }
    },
    methods: {
        hasPermission,
        isShow,
        init() {
            this.class_id = this.$route.query.id;
            this.getClassInfo({ class_id: this.class_id });
            this.$emit('handleReload');
        },
        editDetailTeacherLoad() {
            console.log('222222222', this.$children)
            this.class_id = this.$route.query.id;

            this.getClassInfo({ class_id: this.class_id });
            if (!this.is_show_student) {
                this.teacher_key += 1;
            }
            this.$emit('handleReload');
        },
        returnList: function () {
            this.$router.push({ path: '/kanke/education/gradeclass' });
        },
        getClassInfo(data) {
            getClassInfo(data).then((res) => {
                this.class_name = res.data.class_name;
                this.teacher_names = res.data.teacher_names;
                this.student_num = res.data.student_num;
            })
        },
        edit() {
            this.showAddClass = true;
            this.classId = this.class_id;
        },
        //学员 老师
        handleClick(tab, event) {
            if (tab.name == 'first') {
                this.is_show_student = !this.is_show_student;
            }
            if (tab.name == 'second') {
                this.is_show_student = !this.is_show_student;
            }
        },


    }
}

</script>

<style scoped>
.box-card {
    width: 100%;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}
</style>